<template>
  <template v-if="visible">
    <Teleport to="body">
      <main :class="'gulu-toast-' + position">
        <slot name="content" />
      </main>
    </Teleport>
  </template>
</template>

<script lang="ts">
export default {
  props: {
    position: {
      type: String,
      default: "top",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang='scss'>
@mixin a {
  position: absolute;
  left: 50%;

  background: rgba(128, 128, 128, 0.4);
  padding: 8px 24px;
  border-radius: 6px;
  z-index: 110;
  opacity: 0;
  animation: cansee 4s;
}
@keyframes cansee {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 100;
  }
  70% {
    opacity: 100;
  }
  100% {
    opacity: 0;
  }
}
.gulu-toast- {
  &top {
    @include a;
    transform: translateX(-50%);
    top: 0;
  }
  &middle {
    @include a;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &bottom {
    @include a;
    transform: translateX(-50%);
    bottom: 0;
  }
}
</style>